<template>
  <div
          class="titlebtn"
          :style="style"
          @click="click"/>
</template>

<script>
  const { ipcRenderer: ipc } = require('electron')
  const style = {
    min: {
      backgroundColor: '#2dff35',
      right: '65px'
    },
    max: {
      backgroundColor: '#fff64d',
      right: '40px'
    },
    close: {
      backgroundColor: '#ff1e21',
      right: '15px'
    }
  }
  export default {
    name: 'title-button',
    props: ['type'],
    computed: {
      style: function() {
        return style[this.type]
      }
    },
    methods: {
      click: function() {
        ipc.send(this.type)
      }
    }
  }
</script>

<style>
  .titlebtn {
    position: absolute;
    top: 10px;
    width: 15px;
    height: 15px;
    -webkit-app-region: no-drag;
    border-radius: 50%;
  }
  .titlebtn:hover{
    border: 1px solid rgba(248, 242, 242, 0.6);
  }
</style>
